`<template>
  <div class="passenger">
    <div class="header">
      <div class="table">
        <div class="tuo">
          <div class="tuo-1">
            <div class="tuo-2"></div>
            <span>常旅客列表</span>
          </div>
          <div>
            <el-button
              @click="passengers = true"
              size="mini"
              style="
                width: 96px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              "
              >新增
            </el-button>
          </div>
        </div>
        <!-- 常旅客列表 -->
        <el-table
          border
          :data="Frequenflyer"
          size="mini"
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
          style="width: 100%"
        >
          <el-table-column prop="chineseName" label="中文姓名" width="80">
          </el-table-column>
          <el-table-column prop="englishName" label="英文姓名" width="110">
          </el-table-column>
          <el-table-column prop="gender" label="性别" width="80">
            <template slot-scope="scope">
              <template v-if="scope.row.gender =='male'">男</template>
              <template v-if="scope.row.gender =='female'">女</template>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="年龄" width="80">
          </el-table-column>
          <el-table-column prop="certificateName" label="证件类型" width="100">
          </el-table-column>
          <el-table-column prop="certificateNumcer" label="证件号码">
          </el-table-column>

          <el-table-column prop="birthday" label="出生日期" width="120">
          </el-table-column>
          <el-table-column prop="nation" label="国籍" width="90">
          </el-table-column>
          <el-table-column
            prop="certificateDate"
            label="证件过期时间"
            width="130"
          >
          </el-table-column>
          <el-table-column prop="phone" label="手机号码" width="130">
          </el-table-column>
          <el-table-column prop="name" label="操作" fixed="right" width="240">
            <template slot-scope="scope">
              <el-button
                style="background-color: #6090ec; color: #fff"
                size="mini"
                @click="Modifyddd(scope.row)"
                >修改</el-button
              >
              <el-button
                size="mini"
                style="background-color: #f6b23e; color: #fff"
                @click="dialogVisible = true"
                >操作记录</el-button
              >
              <el-button
                @click="Deletephone(scope.row)"
                style="background-color: #ff0000; color: #fff"
                size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 新增 -->
      <el-dialog
        title="会员信息查询-新增地址"
        :visible.sync="passengers"
        :before-close="handleClose"
        width="50%"
      >
        <div class="header-1">
          <div class="too-1-1">
            <div class="too"></div>
            <span>新增常旅客</span>
          </div>
        </div>
        <el-form
          style="margin-left: 20px"
          size="mini"
          :inline="true"
          :data="addpassengers"
          :model="addpassengers"
          class="pop"
        >
          <div class="pop-2">
            <div class="pop-1-2">
              <div class="pop-9">中文姓名</div>
              <el-input
                style="width: 120px"
                v-model="addpassengers.chineseName"
                size="mini"
              ></el-input>
            </div>
            <div class="pop-1">
              <div class="pop-1-2">
                <div class="pop-7">英文姓名</div>
                <el-input
                  style="width: 120px"
                  v-model="addpassengers.englishName"
                  size="mini"
                ></el-input>
              </div>
            </div>
            <div class="pop-1">
              <div class="pop-7">性别</div>
              <el-select
                v-model="addpassengers.gender"
                size="mini"
                placeholder="请选择"
                style="width: 120px"
              >
                <el-option
                  v-for="item in gender"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="pop-1-2">
            <div class="pop-9">手机号</div>
            <el-input
              style="width: 120px"
              v-model="addpassengers.documents.phone"
              size="mini"
            ></el-input>
          </div>
          <div class="pop-1-2">
            <div class="pop-9">国籍</div>
            <el-select
              v-model="addpassengers.nation"
              size="mini"
              placeholder="请选择"
              style="width: 120px"
            >
              <el-option
                v-for="item in guoji"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="pop-2">
            <div class="pop-1-2">
              <div class="pop-9">证件类型</div>
              <el-select
                v-model="addpassengers.documents.certificateName"
                size="mini"
                placeholder="请选择"
                style="width: 120px"
              >
                <el-option
                  v-for="item in mold"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="pop-1">
              <div class="pop-1-2">
                <div class="pop-7">证件号</div>
                <el-input
                  style="width: 120px"
                  v-model="addpassengers.documents.certificateNumcer"
                  size="mini"
                ></el-input>
              </div>
            </div>
            <div class="pop-1">
              <div class="pop-1-2">
                <div class="pop-7">出生日期</div>
                <el-date-picker
                  format="yyyy 年 MM 月 dd 日"
                  size="mini"
                  style="width: 140px"
                  v-model="addpassengers.documents.birthday"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="pop-1">
            <div class="pop-1-2">
              <div class="pop-9">证件有效期</div>
              <el-date-picker
                size="mini"
                style="width: 140px"
                v-model="addpassengers.documents.certificateDate"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="pop-3">
            <el-button
              @click="getaddPassenger"
              size="mini"
              style="
                width: 110px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              "
              >确定
            </el-button>
          </div>
        </el-form>
      </el-dialog>
      <!-- 修改 -->
      <el-dialog
        title="会员信息查询-修改常旅客"
        :visible.sync="Modify"
        :before-close="handleClose"
        width="50%"
      >
        <div class="header-1">
          <div class="too-1-1">
            <div class="too"></div>
            <span>修改常旅客</span>
          </div>
        </div>
        <el-form
          style="margin-left: 20px"
          size="mini"
          :inline="true"
          :data="addpassengers"
          :model="addpassengers"
          class="pop"
        >
          <div class="pop-2">
            <div class="pop-1-2">
              <div class="pop-9">中文姓名</div>
              <el-input
                style="width: 120px"
                v-model="ravelers.chineseName"
                size="mini"
              ></el-input>
            </div>
            <div class="pop-1">
              <div class="pop-1-2">
                <div class="pop-7">英文姓名</div>
                <el-input
                  style="width: 120px"
                  v-model="ravelers.englishName"
                  size="mini"
                ></el-input>
              </div>
            </div>
            <div class="pop-1">
              <div class="pop-7">性别</div>
              <el-select
                v-model="ravelers.gender"
                size="mini"
                placeholder="请选择"
                style="width: 120px"
                clearable
              >
                <el-option
                  v-for="item in gender"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="pop-1-2">
            <div class="pop-9">手机号</div>
            <el-input
              style="width: 120px"
              v-model="ravelers.phone"
              size="mini"
            ></el-input>
          </div>
          <div class="pop-1-2">
            <div class="pop-9">国籍</div>
            <el-select
              v-model="ravelers.nation"
              size="mini"
              placeholder="请选择"
              style="width: 120px"
              clearable
            >
              <el-option
                v-for="item in guoji"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="pop-2">
            <div class="pop-1-2">
              <div class="pop-9">证件类型</div>
              <el-select
                v-model="ravelers.certificateName"
                size="mini"
                placeholder="请选择"
                style="width: 120px"
                clearable
              >
                <el-option
                  v-for="item in mold"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="pop-1">
              <div class="pop-1-2">
                <div class="pop-7">证件号</div>
                <el-input
                  style="width: 120px"
                  v-model="ravelers.certificateNumcer"
                  size="mini"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="pop-1">
            <div class="pop-1-2">
              <div class="pop-7">出生日期</div>
              <el-date-picker
                format="yyyy 年 MM 月 dd 日"
                size="mini"
                style="width: 140px"
                v-model="ravelers.birthday"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="pop-1">
            <div class="pop-1-2">
              <div class="pop-9">证件有效期</div>
              <el-date-picker
                size="mini"
                style="width: 140px"
                v-model="ravelers.certificateDate"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="pop-3">
            <el-button
              @click="getbackUpdateCommonTravelers"
              size="mini"
              style="
                width: 110px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              "
              >确定
            </el-button>
          </div>
        </el-form>
      </el-dialog>
      <!-- 删除常旅客 -->
      <el-dialog
        title="确认删除该常旅客吗"
        :visible.sync="Deletep"
        :before-close="handleClose"
        width="50%"
      >
        <div class="pop-3">
          <el-button
            @click="getbackDeleteDocuments"
            size="mini"
            style="
              width: 110px;
              font-size: 10px;
              color: #fff;
              height: 30px;
              background-color: #f6b23e;
            "
            >确定
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "passenger",
  // 父子传递参数
  props: ["MembershipInformationData"],
  data() {
    return {
      Modify: false,

      value: "",
      // 证件类型
      gender: [
        {
          value: "male",
          label: "男",
        },
        {
          value: "female",
          label: "女",
        },
      ],
      guoji: [
        {
          value: "中国",
          label: "中国",
        },
        {
          value: "香港",
          label: "香港",
        },
      ],
      mold: [
        {
          value: "ID_CARD",
          label: "身份证",
        },
        {
          value: "MILITARY_ID",
          label: "军人证",
        },
        {
          value: "PASSPORT",
          label: "护照",
        },
        {
          value: "MTPFHKAMR",
          label: "港澳居民来往内地通行证",
        },
        {
          value: "MTPFTR",
          label: "台湾居民来往大陆通行证",
        },
        {
          value: "RPFHKMATR",
          label: "台湾居民来往大陆通行证",
        },
        {
          value: "PRICFF",
          label: "外国人永久居留身份证",
        },
        {
          value: "HKAMP",
          label: "港澳通行证",
        },
        {
          value: "ACCOUNT_BOOK",
          label: "户口本",
        },
        {
          value: "BIRTH_CERTIFICATE",
          label: "出生证明",
        },
        {
          value: "TAIWAN_PASS",
          label: "台湾通行证",
        },
      ],
      // 新增
      addpassengers: {
        chineseName: "",
        englishName: "",
        gender: "",
        nation: "",
        documents: {
          certificateName: "",
          certificateNumcer: "",
          birthday: "",
          certificateDate: "",
          phone: "",
        },
      },
      // 修改
      ravelers: {
        commonTrvelersId: "",
        chineseName: "",
        englishName: "",
        gender: "",
        nation: "",
      },
      Thequery: {
        nationName: "",
      },
      gongdanList: [],
      Frequenflyer: [],
      passengers: false,
      Deletep: false,
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        checked: true,
      },
      radio: 3,
      checked: false,
      sizeForm: {
        name: "",
        region: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleChange(value) {
      console.log(value);
    },
    getDatas(){

    },
    // 查询常旅客信息
    // 查询工单
    getfrequentTraveler() {
   
      this.$axios
        .getfrequentTraveler({
          customerId: this.MembershipInformationData.customerId,
          // caseId: this.Thequery.caseId,
          // caseStatus: this.Thequery.caseStatus,
          // afterTime: this.Thequery.afterTime,
          // agoTime: this.Thequery.agoTime,
          // orderId: this.Thequery.orderId,
          // orderType: this.Thequery.orderType,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            // 工单列表数据
            this.Frequenflyer = res.data;
            console.log(this.Frequenflyer);
            let list = JSON.parse(JSON.stringify(res.data));
            this.gongdanList = list.map((item) => {
              return { item: birthday, item: certificateName };
            });
            console.log(this.gongdanList);
          }
        });
    },  

    // 删除常旅客
    Deletephone(row) {
      this.Deletep = true;
      this.commontrvelersId = row.commontrvelersId;
      console.log(this.commontrvelersId);
    },
    // 删除地址
    getbackDeleteDocuments() {
      this.Deletep = false;
      this.$axios
        .getbackDeleteDocuments({
          commontrvelersId: this.commontrvelersId,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.$message({
          message: '删除成功',
          type: 'success'
        });
          }
        });
    },
    // 新增
    getaddPassenger() {
      this.$axios
        .getaddPassenger({
          chineseName: this.addpassengers.chineseName,
          englishName: this.addpassengers.englishName,
          gender: this.addpassengers.gender,
          nation: this.addpassengers.nation,
          documents: this.addpassengers.documents,
          certificateName: this.addpassengers.certificateName,
          certificateNumcer: this.addpassengers.certificateNumcer,
          birthday: this.addpassengers.birthday,
          certificateDate: this.addpassengers.certificateDate,
          phone: this.addpassengers.phone,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
          }
        });
    },
    // 修改
    getbackUpdateCommonTravelers() {
      this.$axios
        .getbackUpdateCommonTravelers({
          commonTrvelersId: this.commonTrvelersId,
          chineseName: this.ravelers.chineseName,
          englishName: this.ravelers.englishName,
          gender: this.ravelers.gender,
          nation: this.ravelers.nation,
          // certificateName: this.ravelers.certificateName,
          // certificateNumcer: this.ravelers.certificateNumcer,
          // birthday: this.ravelers.birthday,
          // certificateDate: this.ravelers.certificateDate,
          // phone: this.ravelers.phone,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
          }
        });
    },

    // 修改
    Modifyddd() {
      this.Modify = true;
      this.commonTrvelersId = row.commonTrvelersId;
      console.log(this.commonTrvelersId);
    },
  },
  mounted() {
    // 查询工单
    this.getfrequentTraveler();
  },
};
</script>
<style scoped>
.passenger {
  height: 100vh;
  background-color: #f7f7f7;
}
.tuo {
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
  margin-right: 20px;
  /* padding-top: 20px;
  margin-left: 20px; */
}
.tuo-1 {
  display: flex;
}
.tuo-2 {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}
.table {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}
.tabs {
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 20px;
}
.add {
  width: 680px;
  height: 350px;
  background-color: #fff;
  margin-left: 500px;
  border: 1px solid #c4c4c4;
}
.pop-9 {
  font-size: 11px;
  width: 80px;
  padding-top: 5px;
}
.pop-7 {
  font-size: 11px;
  width: 55px;
  padding-top: 5px;
  margin-left: 10px;
}
.pop-8 {
  font-size: 11px;
  padding-top: 10px;
  color: black;
}
.pop-8-1 {
  padding-top: 5px;
  width: 120px;
}
.pop {
  margin-left: 30px;
}
.pop-1 {
  display: flex;
  width: 250px;
}
.pop-1-2 {
  display: flex;
  margin-bottom: 12px;
  margin-right: 10px;
}
.pop-2 {
  display: flex;
}
.pop-3 {
  margin-top: 20px;
}
.add-1 {
  display: flex;
  font-size: 11px;
  margin-bottom: 5px;
}

.add-1-2 {
  width: 48px;
  height: 48px;
  background-color: black;
  border-radius: 50%;
  margin-left: 10px;
}
.add-1-3 {
  margin-top: 15px;
  margin-left: 10px;
  color: #2f80ed;
}
.add-1-4 {
  font-size: 11px;
  color: #828282;
  margin-left: 80px;
  margin-bottom: 15px;
}
.pop-4 {
  font-size: 16px;
  font-weight: bolder;
  color: #ff0000;
}
.too-1-1 {
  display: flex;
  margin-left: 30px;
  padding-top: 20px;
  font-size: 20px;
}
.too {
  width: 3.5px;
  height: 22px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  margin-bottom: 25px;
}
.radio {
  margin-top: 5px;
}
</style>
